<template>
  <div style="padding-left: 20px; padding-right: 20px">
    <BasicForm @register="registerForm" ref="formRef" @model-change="handleChange" />
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed, watch, onMounted } from "vue"
  import { BasicForm, useForm, FormSchema } from "/@/components/Form/index"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { useI18n } from "/@/hooks/web/useI18n"
  const { t } = useI18n("")
  const { createMessage } = useMessage()

  const emit = defineEmits(["change"])
  const props = defineProps({
    record: { type: Object },
  })
  const formRef = ref()
  const inputFormSchemas: FormSchema[] = [
    {
      label: "",
      field: "id",
      component: "Input",
      show: false,
    },
    {
      label: t("唯一标识"),
      field: "code",
      component: "Input",
      componentProps: {
        maxlength: 200,
      },
    },
    {
      label: t("表单名"),
      field: "name",
      component: "Input",
      componentProps: {
        maxlength: 300,
      },
    },
    {
      label: t("提交次数"),
      field: "submitCount",
      component: "Input",
      componentProps: {
        maxlength: 0,
      },
    },
    {
      label: t("备注"),
      field: "remark",
      component: "InputTextArea",
      componentProps: {
        maxlength: 500,
        showCount: true,
        autoSize: {
          maxRows: 5,
          minRows: 5,
        },
      },
      colProps: { lg: 24, md: 24 },
    },
  ]

  const [registerForm, { setProps, resetFields, setFieldsValue, validate, updateSchema }] = useForm({
    labelWidth: 70,
    labelAlign: "left",
    colon: false,
    schemas: inputFormSchemas,
    showActionButtonGroup: false,
    labelCol: {
      md: { span: 4 },
      sm: { span: 6 },
    },
    compact: true,
    size: "large",
    wrapperCol: { lg: 24, md: 24 },
  })

  const handleChange = (val) => {
    emit("change", val)
  }

  onMounted(() => {
    resetFields()
    setFieldsValue(props.record || {})
  })
</script>
